<template>
  <div>
    <Header title="管理地址"></Header>
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
  </div>
</template>

<script setup>
import Header from "@/components/Header.vue";
import { useStore } from "vuex";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
const store = useStore();
const router = useRouter();
let list = ref([]);
const chosenAddressId = ref("1");
const initAddress = () => {
  list.value = store.state.userAddress.map((item) => {
    return {
      id: item.id,
      name: item.name,
      tel: item.tel,
      address: `${item.province}${item.city}${item.county}${item.addressDetail}`,
      isDefault: item.isDefault,
    };
  });
};
const onAdd = () => {
  router.push({ path: "/addressedit", query: { type: "add" } });
};
const onEdit = (item) => {
  router.push({ path: "/addressedit", query: { name: item.id, type: "edit" } });
};
onMounted(() => {
  initAddress();
});
</script>

<style lang="less" scoped>
/deep/.van-tag--primary {
  background: red;
}
/deep/.van-button--primary {
  background: #ffc400;
  border: 1px solid #ffc400;
}
</style>
